<template>
  <div class="suggest-detail-container-padding">
    <!-- tabs start -->
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="项目内容" name="first">
        <DetailContent :detail-data="detailData" />
      </el-tab-pane>
      <el-tab-pane label="相关审核" name="second">
        <AuditList
          v-if="activeName == 'second'"
          :business-id="detailData.projectPlanInfo?.id"
          template-group="PROJECT_PLAN"
          :business-type="3"
        />
      </el-tab-pane>
      <el-tab-pane label="相关会议" name="third">
        <MeetingList
          v-if="activeName == 'third'"
          :association-id="detailData.projectPlanInfo?.id"
          association-type="PROJECT_PLAN"
        />
      </el-tab-pane>
      <el-tab-pane label="相关文档" name="fourth">
        <DocsList
          v-if="activeName == 'fourth'"
          :business-id="detailData.projectPlanInfo?.id"
          :business-type="28"
        />
      </el-tab-pane>
    </el-tabs>
    <!-- tabs end -->
  </div>
</template>

<script setup>
  import { projectPlanGet } from '@/api/project/approval/plan'
  import DetailContent from './components/detailContent.vue'
  import AuditList from '@/components/auditList.vue'
  import DocsList from '@/components/docsList.vue'
  import MeetingList from '@/components/meetingList.vue'

  const route = useRoute()

  const activeName = ref('first')
  const detailData = ref({})

  const getDetail = () => {
    projectPlanGet({
      id: route.query.id,
      getType: 2,
    }).then((res) => {
      if (res.code == 0 || res.code == 200) {
        detailData.value = res.data || {}
      }
    })
  }

  getDetail()
</script>

<style lang="scss" scoped></style>
